Styling Individual Words within a Line Using CSS
CSS allows you to style different words in the same line by wrapping each word (or phrase) in a <span> and applying separate classes or inline styles. This gives you fine-grained control over color, font, size, or other text properties without breaking the line.
Wrap the words you want to style individually in
<span>elements.Assign classes or IDs to each
<span>for custom styling.Use CSS properties like
color,font-weight,font-style,text-decoration,text-shadow, orbackground-clipfor visual effects.Maintain semantic HTML: do not use spans unnecessarily for non-styling purposes.
Combine with pseudo-elements (
::first-letter,::first-line) if partial styling of words or lines is needed.
In this example, the word 'highlighted' is styled with a pink italic color, while 'bold' is styled with a bold purple color. Using spans allows multiple styles within the same line without affecting layout or semantic structure.
Use
<span>only for styling purposes to keep HTML semantic.Keep styles consistent for readability and accessibility.
Avoid excessive inline styling; prefer CSS classes for maintainability.
Test styles across browsers to ensure consistent appearance.
Combine with CSS variables if multiple words share color schemes or effects.